<template>
	<view class="container">
		<view class="form-warpper">
			<form @submit="formSubmit" @reset="formReset">
				<view class="form-item">
					<label>
						<text>Card Number</text>
						<view class="input-item">
							<input type="text" v-model="cardNum" placeholder="Enter Card Number" placeholder-class="input-empty" />
						</view>
					</label>
				</view>
				<view class="form-item">
					<label>
						<text>Expiration Date</text>
						<view class="input-item">
							<input type="text" v-model="cardNum" placeholder="Expiration Date" placeholder-class="input-empty" />
						</view>
					</label>
					<label class="pd-l26">
						<text>Security Code</text>
						<view class="input-item">
							<input type="text" v-model="cardNum" placeholder="Security Code" placeholder-class="input-empty" />
						</view>
					</label>
				</view>
				<view class="form-item">
					<label>
						<text>Card Holder</text>
						<view class="input-item">
							<input type="text" v-model="cardNum" placeholder="Enter Card Holder" placeholder-class="input-empty" />
						</view>
					</label>
				</view>
			</form>
		</view>
		<button class="submit-btn" @click="toSuccess">Pay Now</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cardNum: ''
			}
		},
		methods: {
			toSuccess() {
				this.$common.navigateTo('../public/success')
			}
		}
	}
</script>

<style lang="scss" scoped>
.form-warpper {
	padding: 32rpx;
	.form-item {
		margin-bottom: 48rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		label {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			text {
				font-family: Poppins;
				font-weight: bold;
				line-height: 150%;
				font-size: $font-base;
				letter-spacing: 1rpx;
				color: #223263;
				margin-bottom: 24rpx;
			}
			.input-item {
				padding: 26rpx 32rpx;
				border: 2rpx solid #EBF0FF;
				box-sizing: border-box;
				border-radius: 10rpx;
				.input-empty {
					font-family: Poppins;
					font-size: $font-base;
					line-height: 180%;
					letter-spacing: 1rpx;
					color: #9098B1;
				}
				input {
				}
			}
		}
	}
}
.submit-btn {
	height: 100rpx;
	line-height: 100rpx;
}
</style>
